<template>
  <div class="quality-inspection">
    <el-card class="header-card">
      <div class="page-header">
        <div class="header-left">
          <h2>
            <el-icon><CircleCheck /></el-icon>
            质量检验管理
          </h2>
          <p>管理产品质量检验和质量控制</p>
        </div>
        <div class="header-right">
          <el-button type="primary" @click="showAddDialog">
            <el-icon><Plus /></el-icon>
            新建检验单
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 统计卡片 -->
    <div class="statistics-cards">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)">
                <el-icon><DocumentChecked /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ statistics.total }}</div>
                <div class="stat-label">总检验数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)">
                <el-icon><Select /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ statistics.qualified }}</div>
                <div class="stat-label">合格</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%)">
                <el-icon><CircleClose /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ statistics.unqualified }}</div>
                <div class="stat-label">不合格</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)">
                <el-icon><Promotion /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ statistics.rate }}%</div>
                <div class="stat-label">合格率</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 搜索筛选 -->
    <el-card class="filter-card">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="检验单号">
          <el-input v-model="searchForm.inspectionNo" placeholder="请输入检验单号" clearable />
        </el-form-item>
        <el-form-item label="检验类型">
          <el-select v-model="searchForm.type" placeholder="请选择类型" clearable>
            <el-option label="来料检验" value="incoming" />
            <el-option label="过程检验" value="process" />
            <el-option label="成品检验" value="final" />
          </el-select>
        </el-form-item>
        <el-form-item label="检验结果">
          <el-select v-model="searchForm.result" placeholder="请选择结果" clearable>
            <el-option label="合格" value="qualified" />
            <el-option label="不合格" value="unqualified" />
            <el-option label="待检" value="pending" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            查询
          </el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="table-card">
      <el-table :data="tableData" stripe border v-loading="loading">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="inspectionNo" label="检验单号" width="180" fixed />
        <el-table-column prop="type" label="检验类型" width="120" align="center">
          <template #default="{ row }">
            <el-tag :type="getTypeColor(row.type)">{{ getTypeText(row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="产品名称" width="200" />
        <el-table-column prop="batchNo" label="批次号" width="150" />
        <el-table-column prop="sampleQty" label="抽样数量" width="100" align="right" />
        <el-table-column prop="qualifiedQty" label="合格数量" width="100" align="right">
          <template #default="{ row }">
            <span style="color: #67c23a">{{ row.qualifiedQty }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="unqualifiedQty" label="不合格数量" width="120" align="right">
          <template #default="{ row }">
            <span :style="{ color: row.unqualifiedQty > 0 ? '#f56c6c' : '#67c23a' }">
              {{ row.unqualifiedQty }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="result" label="检验结果" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getResultType(row.result)">{{ getResultText(row.result) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="inspector" label="检验员" width="100" />
        <el-table-column prop="inspectionDate" label="检验日期" width="120" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="handleView(row)">查看</el-button>
            <el-button link type="success" size="small" @click="handleInspect(row)" v-if="row.result === 'pending'">检验</el-button>
            <el-button link type="warning" size="small" @click="handlePrint(row)">打印</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        class="pagination"
      />
    </el-card>

    <!-- 检验对话框 -->
    <el-dialog v-model="inspectVisible" title="质量检验" width="900px">
      <el-form :model="inspectForm" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="检验单号">
              <el-input v-model="inspectForm.inspectionNo" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品名称">
              <el-input v-model="inspectForm.productName" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="抽样数量">
              <el-input-number v-model="inspectForm.sampleQty" :min="1" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合格数量">
              <el-input-number v-model="inspectForm.qualifiedQty" :min="0" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="不合格数量">
              <el-input-number v-model="inspectForm.unqualifiedQty" :min="0" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">检验项目</el-divider>
        <el-table :data="inspectForm.items" border>
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="itemName" label="检验项目" width="200" />
          <el-table-column prop="standard" label="检验标准" width="200" />
          <el-table-column label="检验结果" width="150">
            <template #default="{ row }">
              <el-select v-model="row.result" size="small">
                <el-option label="合格" value="qualified" />
                <el-option label="不合格" value="unqualified" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="备注">
            <template #default="{ row }">
              <el-input v-model="row.remark" size="small" />
            </template>
          </el-table-column>
        </el-table>

        <el-form-item label="检验结论" style="margin-top: 20px">
          <el-radio-group v-model="inspectForm.result">
            <el-radio label="qualified">合格</el-radio>
            <el-radio label="unqualified">不合格</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="备注">
          <el-input v-model="inspectForm.remark" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="inspectVisible = false">取消</el-button>
        <el-button type="primary" @click="submitInspection">提交检验</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  CircleCheck, Plus, Search, DocumentChecked,
  Select, CircleClose, Promotion
} from '@element-plus/icons-vue'

const searchForm = reactive({
  inspectionNo: '',
  type: '',
  result: ''
})

const statistics = reactive({
  total: 345,
  qualified: 330,
  unqualified: 15,
  rate: 95.7
})

const tableData = ref([])
const loading = ref(false)

const pagination = reactive({
  page: 1,
  size: 10,
  total: 0
})

const inspectVisible = ref(false)
const inspectForm = reactive({
  inspectionNo: '',
  productName: '',
  sampleQty: 0,
  qualifiedQty: 0,
  unqualifiedQty: 0,
  result: 'qualified',
  remark: '',
  items: []
})

const fetchData = () => {
  loading.value = true
  setTimeout(() => {
    tableData.value = [
      {
        id: '1',
        inspectionNo: 'QI202501001',
        type: 'final',
        productName: '产品A型号1',
        batchNo: 'BATCH20250110',
        sampleQty: 50,
        qualifiedQty: 48,
        unqualifiedQty: 2,
        result: 'qualified',
        inspector: '张三',
        inspectionDate: '2025-01-10'
      },
      {
        id: '2',
        inspectionNo: 'QI202501002',
        type: 'process',
        productName: '产品B型号2',
        batchNo: 'BATCH20250111',
        sampleQty: 30,
        qualifiedQty: 30,
        unqualifiedQty: 0,
        result: 'qualified',
        inspector: '李四',
        inspectionDate: '2025-01-11'
      },
      {
        id: '3',
        inspectionNo: 'QI202501003',
        type: 'incoming',
        productName: '原材料A',
        batchNo: 'BATCH20250112',
        sampleQty: 20,
        qualifiedQty: 0,
        unqualifiedQty: 0,
        result: 'pending',
        inspector: '-',
        inspectionDate: '2025-01-12'
      }
    ]
    pagination.total = 3
    loading.value = false
  }, 500)
}

const getTypeColor = (type) => {
  const colors = {
    incoming: '',
    process: 'warning',
    final: 'success'
  }
  return colors[type] || ''
}

const getTypeText = (type) => {
  const texts = {
    incoming: '来料检验',
    process: '过程检验',
    final: '成品检验'
  }
  return texts[type] || type
}

const getResultType = (result) => {
  const types = {
    qualified: 'success',
    unqualified: 'danger',
    pending: 'info'
  }
  return types[result] || 'info'
}

const getResultText = (result) => {
  const texts = {
    qualified: '合格',
    unqualified: '不合格',
    pending: '待检'
  }
  return texts[result] || result
}

const handleSearch = () => {
  pagination.page = 1
  fetchData()
}

const handleReset = () => {
  Object.assign(searchForm, {
    inspectionNo: '',
    type: '',
    result: ''
  })
  handleSearch()
}

const handleSizeChange = (size) => {
  pagination.size = size
  fetchData()
}

const handlePageChange = (page) => {
  pagination.page = page
  fetchData()
}

const showAddDialog = () => {
  ElMessage.info('新建检验单')
}

const handleView = (row) => {
  ElMessage.info('查看检验单：' + row.inspectionNo)
}

const handleInspect = (row) => {
  Object.assign(inspectForm, {
    inspectionNo: row.inspectionNo,
    productName: row.productName,
    sampleQty: row.sampleQty,
    qualifiedQty: 0,
    unqualifiedQty: 0,
    result: 'qualified',
    remark: '',
    items: [
      { itemName: '外观检查', standard: '无划痕、无变形', result: 'qualified', remark: '' },
      { itemName: '尺寸检测', standard: '±0.5mm', result: 'qualified', remark: '' },
      { itemName: '功能测试', standard: '正常运行', result: 'qualified', remark: '' }
    ]
  })
  inspectVisible.value = true
}

const handlePrint = (row) => {
  ElMessage.info('打印检验单：' + row.inspectionNo)
}

const submitInspection = () => {
  ElMessage.success('检验完成')
  inspectVisible.value = false
  fetchData()
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped lang="scss">
.quality-inspection {
  padding: 20px;

  .header-card {
    margin-bottom: 20px;
    
    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-left {
        h2 {
          display: flex;
          align-items: center;
          gap: 10px;
          margin: 0 0 10px 0;
          font-size: 24px;
          color: #303133;
        }

        p {
          margin: 0;
          color: #909399;
          font-size: 14px;
        }
      }
    }
  }

  .statistics-cards {
    margin-bottom: 20px;

    .stat-card {
      .stat-content {
        display: flex;
        align-items: center;
        gap: 20px;

        .stat-icon {
          width: 60px;
          height: 60px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 28px;
        }

        .stat-info {
          flex: 1;

          .stat-value {
            font-size: 28px;
            font-weight: bold;
            color: #303133;
            margin-bottom: 5px;
          }

          .stat-label {
            font-size: 14px;
            color: #909399;
          }
        }
      }
    }
  }

  .filter-card {
    margin-bottom: 20px;
  }

  .table-card {
    .pagination {
      margin-top: 20px;
      justify-content: flex-end;
    }
  }
}
</style>

